<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
	</head>
	<body>
		<style type="text/css">
			.class1{border: 2px red solid;}
			.class2{border: 2px greenyellow solid}
		</style>
		<div  id="vueContainer">
			<div>
				{{msg}}
			</div>
			<div v-bind:title="msg2">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</div>
			
			<div v-if="msg3">你看见我了。</div>
			
			<div>
				<ul>
					<li v-for="item in msg4.list">{{item.text}}</li>	
				</ul>
			</div>
			
			<div>
				<ul>
					<li v-for="item in msg5">{{item}}</li>
				</ul>
			</div>
			
			<div>
				<p>{{msg6}}</p>
				<input type="text" v-model="msg6" />
			</div>
			
			<div>
				<p>{{msg7}}</p>
				<button v-on:click="reverseFill">逆反填写</button>
			</div>
			
			<div>
				<input type="text" v-bind:value="msg8" v-bind:placeholder="msg9" v-bind:class="msg10"/>
				<!-- v-bind:class 也可以直接简写为 :class <input type="text" v-bind:value="msg8" :placeholder="msg9" v-bind:class="msg10"/> -->
				<button type="button" v-on:click="transformClass">变换样式</button>
			</div>
			
			<div>
				<p>请选择(单选)</p>
				<input id="nan" type="radio" v-model="msg11"  name="sex" @change="setChecked"/><label for="nan">男</label>
				<input id="nu" type="radio" v-model="msg11" name="sex" @change="setChecked"/><label for="nu">女</label>
				<p>选项结果</p>
				<div>男：<span>{{msg11}}</span></div>
				<div>女：<span>{{msg12}}</span></div>
			</div>
			
			<div>
				<p>关于Vue绑定事件触发时获取事件对象的example</p>
				<input id="username" @change="getVal($event)" @input="getVal($event)" type="text" placeholder="请输入用户名"/>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var str = "Hello World!";
		var vm = new Vue({
			el:"#vueContainer",
			data:{
				msg: str,
				msg2: "页面加载于" + new Date().toLocaleString(),
				msg3: true,
				msg4: {list:[{"text":"文本1"},{"text":"文本2"},{"text":"文本3"},{"text":"文本4"}]},
				//可利用js对vm.msg4.list对象进行添加eg：vm.msg4.list.push({"text":"文本js添加"})
				msg5: ["1","2","3"],
				msg6: "Hello World!",
				msg7: "这句话的顺序",
				msg8: "输入框",
				msg9: "请输入红色输入框",
				msg10: "class1",
				msg11: null,
				msg12: null,
				msg13: "",
			},
			methods: {
				reverseFill: function(){
					this.msg7 = this.msg7.split("").reverse().join("");
				},
				transformClass: function(){
					if(this.msg10=="class1"){
						this.msg10 = "class2";
						this.msg9 = "请输入黄色输入框";
					}else{
						this.msg10 = "class1";
						this.msg9 = "请输入红色输入框";
					}
				},
				setChecked: function(){
					
				},
				getVal: function(event){
					this.msg13 = event.target.value;
					console.log(this.msg13);
				}
			}
		});
		setTimeout(function(){
			str = "Hi";
			vm.msg = str;//单独的去
		},1000)
		/*
		 vue.js
		 * 个人理解：设置了一个Vue对象，通过json参数化进行便利的参数数据功能选择
		 * 基础json属性--el--目标范围对象
		 * 			--data--基础渲染数据组容器
		 * 			--methods--监听事件对应的函数集合
		 * 			--model--
		 * 			--template--
		 * 			--components--
		 * 
		 * vue.js最大的特点就是其所有的东西都是相应式的
		 * vue标签基础属性--'v-'--指令：这个是应用在DOM对象/节点上特殊的
		 * 			--v-bind:--指令
		 * 			特点：--'v-bind:'--可以用来bind众多的属性，用来进行实时响应的变化
		 * 			--':value'--为'v-bind:'的缩写--及为属性绑定的缩写。
		 * 
		 * v-if的例子表明了vue.js的绑定不仅仅局限于DOM的文本和其已有的属性，还包括DOM以外的如逻辑运算的if条件句及其内部相应的逻辑运算
		 * 			--v-if:--的判断并非是界面加载时只判断一次，而是实时的判断
		 * 
		 * vue的事件触发--'v-on:'--事件监听
		 * 			--'v-on:click'--监听点击事件，join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
		 * 			--需要注意'methods'单词的编写正确
		 * 			--'@change'--为'v-on:'的缩写--及为监听事件的缩写
		 * 
		 * vue的表格实时输入绑定--'v-model:'--实现表单输入和应用状态之间的双向绑定。
		 * 			--主要使用的表单输入用三种
		 * 				--1.input[type="text"]
		 * 				--2.input[type="checkbox"]
		 * 				--3.input[type="radio"]
		 * 
		 * */
	</script>
	
</html>
